<template>
  <div>
    <div v-if="!transfer">
      <div style="padding-top: 10vh;
  font-size: 90px;
  text-align: center;">
        <!-- <a-icon style="size:100px" type="check-circle" /> -->
        <a-icon 
          class="success"
          type="check-circle"
        />
      </div>
      <div class="okmessage">
        已受理，实际到账时间以银行最终处理为准。
        <!-- 恭喜您，已成功提现 <span style="color:#29a576">{{amount | rechargefilter}}</span> &ensp;元。 -->
      </div>
      <!-- <div style=" width: 260px;margin: 0 auto;text-align: center;">若提现失败，资金将自动退还至您的账户</div> -->
      <div class="end-ok">
        <!-- <a-button type="primary" @click="tocash">继续提现</a-button> &nbsp;&nbsp;  -->
        <a-button @click="endok">返回首页</a-button>
      </div>
    </div>
    <div v-if="transfer">
      <div style="padding-top: 10vh;
  font-size: 90px;
  text-align: center;">
        <!-- <a-icon style="size:100px" type="check-circle" /> -->
        <a-icon
          :class="[isbind ? 'transfersuccess' : 'error' ,'icon']"
          :type="isbind ? 'check-circle' : 'close-circle'"
        />
      </div>

      <div v-if="!isbind">
        <div class="okmessage">失败原因：{{Failurereason}}</div>

        <div class="end-ok">
          <a-button @click="endok">返回首页</a-button>
        </div>
      </div>

      <div v-if="isbind">
        <div class="okmessage">
          恭喜，您已经成功转账了
          <span style="color:#1890ff">{{amount | rechargefilter}}</span> &ensp;元。
          <br />
          收款人：{{name|namefilter}} <span
              v-if='memberType == "CU"'
            >（{{mobileNo | mobileNofilters}}）</span>
            <span v-if='memberType == "CB"'>（{{email | emailfilter}}）</span>
        </div>

        <div class="end-ok">
          <a-button @click="torecharge" type="primary">继续转账</a-button>&nbsp;&nbsp;
          <a-button @click="endok" style="color:#1890ff;border-color:#1890ff;font-size: 14px;">返回首页</a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { log } from 'util';
export default {
  data() {
    return {
      transfer: false,
      seat: [],
      bankrecharge: "",
      typename: "",
      isbind: false,
      Failurereason: "未知错误",

      amount: "",
      name: "",
      mobileNo: "",
      memberType: "",
      email:""
    };
  },
  filters: {
    rechargefilter(value) {
      return parseFloat(value / 100).toFixed(2);
    },
    namefilter(value) {
      if (value) {
        var reg = /^./;
        return value.replace(reg, "*");
      }
    },
    mobileNofilters(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
    emailfilter(value) {
      if (value) {
        let len = value.indexOf("@") - 2;
        console.log(len);
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          value.substring(0, 1) +
          arrstring +
          value.substring(value.indexOf("@") - 1)
        );
      }
    }
  },
  created() {
    this.getParams();
  },
  methods: {
    endok() {
      this.$router.push({ path: "/userMain" });
    },
    tocash(){
      this.$router.push({ path: "/perCashOut" });
    },
    torecharge() {
      this.$router.push({ path: "/allPayment" });
    },
    getParams() {
      // 取到路由带过来的参数
      this.isbind = this.$route.params.isbind;
      this.amount = this.$route.params.amount;
      this.name = this.$route.params.name;
      this.mobileNo = this.$route.params.mobileNo;
      this.memberType = this.$route.params.memberType;
      this.email = this.$route.params.email;
      
      console.log(this.mobileNo);
      console.log(this.memberType);
      if (this.isbind == true) {
        this.transfer = true;
      }
    }
  }
};
</script>
<style scoped>
@import " ../../../static/css/color.css";
.success {
  color: green;
}
.transfersuccess {
  color: #1890ff;
}
.error {
  color: red;
}
.okmessage {
  text-align: center;

  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
  font-size: 30px;
}

.end-ok {
  padding-top: 100px;
  margin: 0 auto;
  text-align: center;
}
</style>